<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chanel首页</title>
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
    <script src="../js/cookie.js"></script>
</head>

<body>
    <header class="clear_fix">
        <!-- 头部logo -->
        <div class="img">
            <img src="../img/logo_black.png" alt="">
        </div>
        <!-- 头部登录部分 -->
        <div class="login">
            <div>
                <span class="loginbtn">请登录</span>
                <span class="iconfont icon-shoppingbags"></span>
                <em>12</em>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div class="navigator">
        <div class="nav">
            <ul>
                <li>
                    <span>香水</span>
                    <div class="ol">
                        <div>
                            <em>明星系列</em>
                            <ul>
                                <li>CHANEL Parfumeur</li>
                                <li>香奈儿五号之水。你的下一个动作是？</li>
                                <li>新品资讯</li>
                                <li>男士精选</li>
                                <li>香奈儿的花田</li>
                                <li>细节的艺术</li>
                            </ul>
                        </div>
                        <div>
                            <em>女士香水</em>
                            <ul>
                                <li>五号香水系列</li>
                                <li>可可小姐香水系列</li>
                                <li>香奈儿嘉柏丽尔香水系列</li>
                                <li>邂逅香水系列</li>
                                <li>邂逅清新淡香水系列</li>
                                <li>邂逅柔情淡香水系列</li>
                                <li>邂逅活力淡香水系列</li>
                            </ul>
                        </div>
                        <div>
                            <em>套组</em>
                            <ul>
                                <li>礼物套组</li>
                                <li>可可小姐黑色香水系列</li>
                                <li>可可香水系列</li>
                                <li>香奈儿魅力香水系列</li>
                                <li>香奈儿感性魅力香水系列</li>
                                <li>十九号香水系列</li>
                                <li>水晶恋香水系列</li>
                            </ul>
                        </div>
                        <div>
                            <em>男士香水</em>
                            <ul>
                                <li>蔚蓝男士香水系列</li>
                                <li>男士运动香水系列</li>
                                <li>男士极限运动香水系列</li>
                                <li>男士香水系列</li>
                                <li>白色魅力精粹男士香水系列</li>
                                <li>香奈儿白金男性香水系列</li>
                                <li>香奈儿自我男性香水系列</li>
                                <li>绅士男性香水系列</li>
                                <li>力度男性香水系列</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <span>彩妆</span>
                    <div class="ol">
                        <div>
                            <em>新品</em>
                            <ul>
                                <li>香奈儿山茶花唇膏</li>
                                <li>全新香奈儿炫亮魅力印记唇釉</li>
                                <li>底妆新法则。 光采由你。</li>
                                <li>香奈儿柔光持妆粉底液</li>
                                <li>香奈儿双效持色唇釉</li>
                                <li>全新眼部彩妆系列</li>
                                <li>全新 香奈儿可可小姐炫光唇膏</li>
                                <li>香奈儿男士系列</li>
                            </ul>
                        </div>
                        <div>
                            <em>脸部</em>
                            <ul>
                                <li>妆前乳</li>
                                <li>遮瑕</li>
                                <li>粉底</li>
                                <li>蜜粉</li>
                                <li>高光</li>
                                <li>腮红</li>
                                <li>米色时尚</li>
                                <li>修颜</li>
                            </ul>
                        </div>
                        <div>
                            <em>眼部</em>
                            <ul>
                                <li>睫毛膏</li>
                                <li>眼影</li>
                                <li>眼线笔</li>
                                <li>眉笔</li>
                                <li>眼部彩盘</li>
                            </ul>
                        </div>
                        <div>
                            <em>唇部</em>
                            <ul>
                                <li>唇膏</li>
                                <li>液体唇膏</li>
                                <li>唇蜜</li>
                                <li>护唇膏</li>
                                <li>唇线笔</li>
                                <li>唇颊彩盘</li>
                                <li>CHANEL TRY ON</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <span>护肤品</span>
                    <div class="ol">
                        <div>
                            <em>新品</em>
                            <ul>
                                <li>提拉紧致 年轻向上</li>
                                <li>限量旅行套装</li>
                                <li>全明星组合</li>
                                <li>柔和净肤系列</li>
                                <li>山茶花保湿系列</li>
                                <li>奢华精萃洁面系列</li>
                            </ul>
                        </div>
                        <div>
                            <em>明星系列</em>
                            <ul>
                                <li>新品资讯</li>
                                <li>男士精选</li>
                                <li>细节艺术</li>
                                <li>香奈儿护肤的奥秘</li>
                            </ul>
                        </div>
                        <div>
                            <em>护肤步骤</em>
                            <ul>
                                <li>清洁/卸妆</li>
                                <li>精华水</li>
                                <li>精华/密集护理</li>
                                <li>乳霜</li>
                                <li>精油</li>
                                <li>眼唇护理</li>
                                <li>防护</li>
                                <li>面膜/去角质</li>
                                <li>喷雾</li>
                                <!-- <li>密集护理</li>
                                <li>身体护理</li>
                                <li>按摩工具</li>
                                <li>套组</li> -->
                            </ul>
                        </div>
                        <div>
                            <em>产品系列</em>
                            <ul>
                                <li>奢华精萃系列</li>
                                <li>智慧紧肤系列</li>
                                <li>山茶花保湿系列</li>
                                <li>光采透白系列</li>
                                <li>柔和净肤系列</li>
                                <li>蓝色肌底精华</li>
                                <li>C C 霜</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <span>特别推荐</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 网页主体部分 -->
    <main>
        <!-- 轮播图 -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/banner1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/banner2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/banner3.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <div class="swiper-pagination"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 商品展示区 -->
        <div class="show1">
            <div class="left">
                <h2>蔚蓝男士香精</h2>
                <span>饱满馥郁的木质芳香调。清新蓬勃的开瓶调，呼应新喀里多尼亚檀香木的醇厚气息。</span>
                <a>立即购买</a>
            </div>
            <div class="right">
                <img src="../img/show1-1.jpg" alt="">
                <img src="../img/show1-2.png" alt="">
            </div>
        </div>
        <!-- 商品展示区 -->
        <div class="show2">
            <div class="left">
                <img src="../img/show2-1.jpg" alt="">
                <img src="../img/show2-2.png" alt="">
            </div>
            <div class="right">
                <h2>全新蔚蓝男士二合一须后润肤露</h2>
                <span>清爽质地能够被肌肤快速吸收，润泽肌肤，软化胡须。</span>
                <a>立即购买</a>
            </div>
        </div>
        <!-- 商品展示区 -->
        <div class="show1">
            <div class="left">
                <h2>全新蔚蓝男士剃须凝露</h2>
                <span>创新清透啫喱质地，清晰显出胡须轮廓，轻松实现干净清爽的剃须效果。使用后，肌肤柔软细腻，清新舒爽。</span>
                <a>立即购买</a>
            </div>
            <div class="right">
                <img style="width: 392px;height: 491px;margin-left: -196px" src="../img/show3-1.jpg" alt="">
                <img style="width: 142px;height: 368px;left: 60px;bottom: -120px;" src="../img/show3-2.png" alt="">
            </div>
        </div>
        <!-- 商品展示区 -->
        <div class="show2">
            <div class="left">
                <img src="../img/show4-1.jpg" alt="">
                <img style="width: 214px;height: 301px;right: 60px;" src="../img/show4-2.png" alt="">
            </div>
            <div class="right">
                <h2>蔚蓝男士须后乳</h2>
                <span>清爽不黏腻的质地舒缓肌肤，散发蔚蓝男士香水的淡雅气息。</span>
                <a>立即购买</a>
            </div>
        </div>
        <!-- 商品列表页 -->
        <div class="goodslist">
            <h2>蔚蓝男士系列</h2>
            <p>迷人的木质芳香调，呈现一系列香氛作品与为男士量身定制的剃须护理产品。</p>
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a>所有商品</a></li>
                <li role="presentation"><a>香水</a></li>
                <li role="presentation"><a>护理品</a></li>
            </ul>
            <div class="button">
                <button class="btnasc">按降价排序</button>
            </div>
            <ol class="clear_fix">
                <!-- <li>
                    <img src="../img/show1-2.png" alt="">
                    <div class="textbox">
                        <a>BLEU DE CHANEL</a>
                        <span>香奈儿蔚蓝男士香精</span>
                        <em class="discontent"></em>
                        <p>¥ 950.00</p>
                        <button>立即购买</button>
                    </div>
                </li> -->
            </ol>
        </div>
    </main>
    <footer>
        <ul>
            <li>
                <h3>线上客服</h3>
                <p>香奈儿线上专门店客服团队将竭诚为您服务,请联系线上美容顾问
                    或致电 4009-555-888，工作时间每日上午9点至晚上24点。</p>
            </li>
            <li>
                <h3>购买</h3>
                <p>每笔订单均附赠指定体验装。</p>
                <p>并享受免费订单配送。</p>
            </li>
            <li>
                <h3>最新资讯</h3>
                <p>订阅香奈儿最新资讯：限量创作系列，到心意好礼，尽在掌握。</p>
                <span>订阅</span>
            </li>
        </ul>
    </footer>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })        
    </script>
</body>

</html>